<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      
        <defs>
          <filter id="f1">
            <feColorMatrix in="SourceGraphic"
              type="matrix"
              values="
                1 0 0 0 1 
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0"/>
          </filter>
        </defs>
      
        <g filter="url(#f1)">
          <rect x="20" y="20" width="20" height="30" fill="rgb(100,0,0)"/>
          <rect   x="40" y="20" width="20" height="30" fill="rgb(0,100,0)"/>
          <rect x="60" y="20" width="20" height="30" fill="rgb(0,0,100)"/>
        </g>

        <g transform="translate(0,40)">
          <rect x="20" y="20" width="20" height="30" fill="rgb(100,0,0)"/>
          <rect x="40" y="20" width="20" height="30" fill="rgb(255,100,0)"/>
          <rect x="60" y="20" width="20" height="30" fill="rgb(0,0,100)"/>
        </g>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      
      <defs>
        <filter id="f2">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="
              -1 3 -1 0 0 
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0"/>
        </filter>
      </defs>
    
      <image filter="url(#f2)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
      <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
      
    <defs>
      <filter id="f3">
        <feColorMatrix in="SourceGraphic"
          type="matrix"
          values="
            2 0 0 0 .2 
            0 2 0 0 .2
            0 0 2 0 .2
            0 0 0 1 0"/>
      </filter>
    </defs>
  
    <image filter="url(#f3)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
    <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
</svg>

<svg width="400" height="400" viewBox="0 0 100 100">
      
  <defs>
    <filter id="f4">
      <feColorMatrix in="SourceGraphic"
        type="matrix"
        values="
          0 1 0 0 0
          0 1 0 0 0
          0 1 0 0 0
          0 0 0 1 0"/>
    </filter>
  </defs>

  <image filter="url(#f4)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
  <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
</svg>

<svg width="400" height="400" viewBox="0 0 100 100">
      
  <defs>
    <filter id="f5">
      <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="1.5"/>
    </filter>
  </defs>

  <image filter="url(#f5)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
  <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
</svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f6">
        <feColorMatrix in="SourceGraphic"
          type="hueRotate"
          values="180"/>
      </filter>
    </defs>

    <image filter="url(#f6)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
    <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
  </svg>

  <svg width="400" height="400" viewBox="0 0 100 100">
        
    <defs>
      <filter id="f7">
        <feColorMatrix in="SourceGraphic"
          type="luminanceToAlpha"/>
      </filter>
    </defs>

    <image filter="url(#f7)" href="../imgs/6.png" x="0" y="0" height="60" width="60"/>
    <image href="../imgs/6.png" x="0" y="0" height="60" width="60" transform="translate(0,50)" />
  </svg>
  
    <script src="index.js"></script>
  </body>
</html>
